<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Basic Panel - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="${s3('/layer/theme/default/layer.css')}">
    <link rel="stylesheet" type="text/css" href="${s3('/easyui-ins/themes/insdep/easyui.css')}"/>
    <link rel="stylesheet" type="text/css" href="${s3('/easyui-ins/themes/insdep/easyui_animation.css')}"/>
    <link rel="stylesheet" type="text/css" href="${s3('/easyui-ins/themes/insdep/easyui_plus.css')}"/>
    <link rel="stylesheet" type="text/css" href="${s3('/easyui-ins/themes/insdep/insdep_theme_default.css')}"/>
    <link rel="stylesheet" type="text/css" href="${s3('/easyui-ins/themes/insdep/icon.css')}"/>
    <link rel="stylesheet" type="text/css"
          href="${s3('/easyui-ins/plugin/font-awesome-4.7.0/css/font-awesome.min.css')}">
    <link rel="stylesheet" type="text/css" href="${s0('/css/yvan.css')}"/>
    <style>
        .theme-header-layout {
            background: #62a8d1 url(${s3('/img/logo2.png')}) left center no-repeat;
        }

        .easyui-tree .fa {
            color: #004c8b;
            text-align: center;
            vertical-align: middle;
            font-size: 18px;
            width: 22px;
        }

        .tree-node {
            padding: 8px;
        }

        .tree-node-selected {
            background: #b8c1c9
        }

        .tree-title {
            font-size: 13px;
            padding-left: 3px;
        }
    </style>
</head>
<body class="easyui-layout">
<div data-options="region:'north',border:false,bodyCls:'theme-header-layout'" style="height:65px;padding: 0;">
<#--
<div style="float: left">
    <img src="${s3('/img/left-logo.png')}">
</div>

    <div style="float:right">
        <select id="whSelect2" data-options="onChange:onWhSelectChange" style="width: 250px">
        </select>
    </div>
-->
    <div class="theme-navigate">
        <div class="right">
            <a href="javascript:;" class="easyui-menubutton"
               data-options="menu:'#whSelect',hasDownArrow:false,menuAlign:'right'">
                选择仓库
                <i class="yvan-icon fa fa-caret-down"></i>
            </a>

            <div id="whSelect" class="theme-navigate-more-panel" style="display:none;">
                <ul class="dropdown-menu user-menu">
                    <li>
                        <a onclick="javascript:;">
                            <i class="yvan-icon fa fa-cog"></i> 仓库1
                        </a>
                    </li>
                    <li>
                        <a onclick="javascript:;">
                            <i class="yvan-icon fa fa-cog"></i> 仓库2</a>
                    </li>
                    <li>
                        <a onclick="javascript:;">
                            <i class="yvan-icon fa fa-cog"></i> 仓库3</a>
                    </li>
                    <li>
                        <a onclick="javascript:;">
                            <i class="yvan-icon fa fa-cog"></i> 仓库4</a>
                    </li>
                </ul>
            </div>

            <a href="javascript:;" class="easyui-menubutton"
               data-options="menu:'#profile',hasDownArrow:false,menuAlign:'right'">
                  <span class="user-photo">
                    <i class="yvan-icon fa fa-user"></i>
                  </span>
                系统设置
                <i class="yvan-icon fa fa-caret-down"></i>
            </a>

            <div id="profile" class="theme-navigate-more-panel" style="display:none;">
                <ul class="dropdown-menu user-menu">
                    <li>
                        <a onclick="toUpdatePas()">
                            <i class="yvan-icon fa fa-cog"></i> 修改密码
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="/user/logout.htm">
                            <i class="yvan-icon fa fa-power-off"></i> 退出登录
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!--
    <a href="javascript:void(0);" class="easyui-linkbutton" onclick="addTab('baidu','http://www.baidu.com/')">baidu</a>
    <a href="javascript:void(0);" class="easyui-linkbutton" onclick="addTab('news','http://news.baidu.com/')">news</a>
    <a href="javascript:void(0);" class="easyui-linkbutton"
       onclick="addTab('hao123','http://www.hao123.com/')">hao123</a>
    -->
</div>
<div data-options="region:'west',title:'',split:true,border:false" style="width:300px;">

    <div id="lt" class="easyui-accordion" data-options="fit:true" style="">
        <div title="系统功能导航" style="padding:5px;overflow-x: hidden">
            <input class="easyui-searchbox" data-options="prompt:'搜索',searcher:doSearch"
                   style="width:100%;"/>
            <ul id="menutree" class="easyui-tree" style="margin: 5px -5px">
            </ul>
        </div>
        <div title="常用功能收藏">
            <ul class="easyui-tree" data-options=""></ul>
        </div>
    </div>


</div>
<div data-options="region:'south',border:false"
     style="height:30px;border-top: 1px solid rgb(220, 220, 220);line-height: 20px;padding: 6px 0 6px 8px;background-color: #fff;overflow: hidden">
    湖北九州通达科技开发有限公司 2018 ©.
</div>
<div data-options="region:'center',border:false">
    <div id="tt" class="easyui-tabs" data-options="fit:true">
    </div>

    <div id="mm" class="easyui-menu" style="width:120px;">
        <div data-options="name:1">关闭</div>
        <div data-options="name:4">刷新</div>
        <div class="menu-sep"></div>
        <div data-options="name:2">全部关闭</div>
        <div data-options="name:3">除此之外全部关闭</div>
    </div>
</div>
<div id="dd">Dialog Content.</div>
</body>
</html>

<script type="text/javascript" src="${s0('/jquery-easyui/jquery.min.js')}"></script>
<script type="text/javascript" src="${s0('/jquery-easyui/jquery.easyui.min.js')}"></script>
<#--
<script type="text/javascript" src="${s0('/jquery-easyui/locale/easyui-lang-zh_CN.js')}"></script>
<script type="text/javascript" src="${s0('/easyui-ins/jquery.min.js')}"></script>
<script type="text/javascript" src="${s0('/easyui-ins/jquery.easyui-1.5.1.min.js')}"></script>
-->
<script type="text/javascript" src="${s0('/easyui-ins/themes/insdep/jquery.insdep-extend.min.js')}"></script>
<script type="text/javascript" src="${s0('/layer/layer.js')}"></script>
<script type="text/javascript" src="${s0('/js/yvan.js')}"></script>
<script>
    function closeTab(menu, type) {
        var allTabs = $("#tt").tabs('tabs');
        var allTabtitle = [];
        $.each(allTabs, function (i, n) {
            var opt = $(n).panel('options');
            if (opt.closable)
                allTabtitle.push(opt.title);
        });
        var curTabTitle = $(menu).data("tabTitle");
        var curTabIndex = $("#tt").tabs("getTabIndex", $("#tt").tabs("getTab", curTabTitle));
        switch (type) {
            case 1:
                $("#tt").tabs("close", curTabIndex);
                return false;
                break;
            case 2:
                for (var i = 0; i < allTabtitle.length; i++) {
                    $('#tt').tabs('close', allTabtitle[i]);
                }
                break;
            case 3:
                for (var i = 0; i < allTabtitle.length; i++) {
                    if (curTabTitle != allTabtitle[i])
                        $('#tt').tabs('close', allTabtitle[i]);
                }
                $('#tt').tabs('select', curTabTitle);
                break;
            case 4:
                //当前tab
                var current_tab = $('#tt').tabs("getTab", curTabTitle);
                var src = current_tab.children('iframe').attr('src');
                current_tab.children('iframe').attr('src', src);
                $('#tt').tabs('select', curTabTitle);
                break;
        }
    }

    $(document).ready(function () {

        $('#whSelect2').combogrid({
            url: '/common/whData.json',
            method: 'get',
            loader: myloader,
            panelWidth: 450,
            //value: 'WH_3',
            idField: 'whId',
            textField: 'whName',
            fitColumns: true,
            columns: [[
                {field: 'whId', title: '仓库编号', width: 60},
                {field: 'whName', title: '仓库名称', width: 100},
                {field: 'logogram', title: '助记码', width: 120},
                {field: 'createAt', title: '创建时间', width: 100}
            ]]
        });

        $('#tt').tabs({
            onContextMenu: function (e, title, index) {
                e.preventDefault();
                if (index >= 0) {
                    $('#mm').menu('show', {
                        left: e.pageX,
                        top: e.pageY
                    }).data("tabTitle", title);
                }
            }
        });

        $('#mm').menu({
            onClick: function (item) {
                closeTab(this, item.name);
            }
        });

        $('#menutree').tree({
            data: [
                {
                    "text": "桌面",
                    "iconCls": "icon-blank fa fa-desktop",
                }, {
                    "text": "系统管理",
                    "iconCls": "icon-blank fa fa-bomb",
                    "state": "closed",
                    "children": [
                        {
                            "text": "菜单功能管理",
                            "iconCls": "icon-blank fa fa-car",
                            "href": "/menu11.html"
                        }, {
                            "text": "角色管理",
                            "iconCls": "icon-blank fa fa-child",
                            "href": "/menu12.html"
                        }, {
                            "text": "用户角色管理",
                            "iconCls": "icon-blank fa fa-cube",
                            "href": "/menu13.html"
                        }, {
                            "text": "ID规则管理",
                            "iconCls": "icon-blank fa fa-code",
                            "href": "/menu14.html"
                        }
                    ]
                }, {
                    "text": "入库管理",
                    "iconCls": "icon-blank fa fa-bell",
                    "state": "closed",
                    "children": [{
                        "text": "质检查询",
                        "iconCls": "icon-blank fa fa-paw",
                        "href": "/menu21.html"
                    }, {
                        "text": "入库收货",
                        "iconCls": "icon-blank fa fa-steam",
                        "href": "/menu22.html"
                    }]
                }, {
                    "text": "开发辅助",
                    "iconCls": "icon-blank fa fa-gg",
                    "state": "closed",
                    "children": [{
                        "text": "表单",
                        "iconCls": "icon-blank fa fa-wpforms",
                        "href": "/dev/form.html"
                    }, {
                        "text": "图标",
                        "iconCls": "icon-blank fa fa-html5",
                        "href": "/dev/icons.html"
                    }, {
                        "text": "按钮",
                        "iconCls": "icon-blank fa fa-clone",
                        "href": "/dev/button.html"
                    }, {
                        "text": "单表格",
                        "iconCls": "icon-blank fa fa-newspaper-o",
                        "href": "/dev/grid.html"
                    }, {
                        "text": "多表格",
                        "iconCls": "icon-blank fa fa-trello",
                        "href": "/dev/mugrid.html"
                    }, {
                        "text": "左树右表",
                        "iconCls": "icon-blank fa fa-tree",
                        "href": "/dev/mugrid.html"
                    }, {
                        "text": "通用对话框",
                        "iconCls": "icon-blank fa fa-opera",
                        "href": "/dev/dialog.html"
                    }, {
                        "text": "组件示例",
                        "iconCls": "icon-blank fa fa-cube",
                        "href": "/easyui-ins/example/index.html"
                    }]
                }],
            onClick: function (node) {
                var url = $(node).attr('href');
                if (url) {
                    var text = $(node).attr('text');
                    addTab(text, url);
                }
            }
        })
    });

    // 阻止默认事件
    var stopPreventDefault = function (e) {
        if (e && e.preventDefault)
            e.preventDefault();
        else
            window.event.returnValue = false;
    };

    function onWhSelectChange() {
        console.log(arguments);
    }

    function doSearch() {
        console.log(arguments);
    }

    function addTab(title, url) {
        if ($('#tt').tabs('exists', title)) {
            $('#tt').tabs('select', title);
        } else {
            var content = '<iframe scrolling="auto" frameborder="0"  src="' + url + '" style="width:100%;height:100%;"></iframe>';
            $('#tt').tabs('add', {
                title: title,
                content: content,
                closable: true
            });
        }
    }
</script>